import {ITodo} from '../scripts/types.js'
// import * as React from "react";

interface st {
    list:HTMLElement
    todos:ITodo[]
    div_class: string,
}

class Mapp extends React.Component<any,st>{
    myRef: React.RefObject<HTMLInputElement>;

    constructor(props:any) {
        super(props);
        this.myRef = React.createRef();
        this.state = {
            // item : this.load(),
            list : document.getElementById('todos'),
            todos: this.startload(),
            div_class: 'todo-item',
        };
    }

    getinput = (e: React.KeyboardEvent) =>{
        if (e.key === 'Enter'){
            if ((this.myRef.current.value !== null) && (this.myRef.current.value !== "")){
                let todo:ITodo = new ITodo({ content: this.myRef.current.value, finished: false })
                this.addItem(todo)
                this.myRef.current.value = ''
            }
            this.load()
        }
    }

    startload(){
        let todos = localStorage.getItem('todos') //string
        if (todos) {
            try {
                // 缓存中的数据只有 content、finished 属性，没有el，对应的是ITodo接口而不是Todo
                let items: ITodo[] = JSON.parse(todos)
                //object[]
                return items
            } catch (error) {
                console.error('invalid cache')
                return null
            }
        }else
            return []
    }

    load() {
        let todos = localStorage.getItem('todos') //string
        if (todos) {
            try {
                // 缓存中的数据只有 content、finished 属性，没有el，对应的是ITodo接口而不是Todo
                let items: ITodo[] = JSON.parse(todos)
                //object[]
                this.setState({
                    todos:items
                })
            } catch (error) {
                console.error('invalid cache')
            }
        }
    }

    dump() {
        localStorage.setItem('todos', JSON.stringify(this.state.todos))
    }

    addItem(item:ITodo){
        this.state.todos.push(item)
        // this.setState({
        //     todos: [...this.state.todos,item]
        // })
        this.dump()
    }

    toggleItem(item:ITodo){
        item.finished = !item.finished
        if (item.finished === true){
            this.setState({
                div_class: 'todo-item todo-finished'
            })
        }else {
            this.setState({
                div_class: 'todo-item'
            })
        }
        this.dump()
    }

    delItem(item: ITodo){
        let index = this.state.todos.indexOf(item)
        let x = this.state.todos
        x.splice(index, 1)
        this.setState({
            todos:x
        })
        this.dump()
    }

    render(){
        return(
            <div>
            <header id="head">
                <div className="title">TS Todo</div>
                <input
                    ref={this.myRef}
                    id="input"
                    type="text"
                    className="input"
                    placeholder="What needs to be done?"
                    autoComplete="off"
                    onKeyDown={this.getinput}
                />
            </header>
            <section id="todos">
                {this.state.todos.map((item,index) => {
                if (item.finished === true ){
                    return (
                        <div className='todo-item todo-finished' key={index} >
                            <i className='iconfont icon-checkbox' onClick={() => this.toggleItem(item)}></i>
                            <span className='todo-title'>{item.content}</span>
                            <i className='iconfont icon-delete' onClick={() => this.delItem(item)}></i>
                        </div>
                    )
                }else {
                    return (
                        <div className='todo-item' key={index} >
                            <i className='iconfont icon-checkbox' onClick={() => this.toggleItem(item)}></i>
                            <span className='todo-title'>{item.content}</span>
                            <i className='iconfont icon-delete' onClick={() => this.delItem(item)}></i>
                        </div>
                    )
                }
                })}
            </section>
            </div>)
    }
}

ReactDOM.render(<Mapp />, document.getElementById('app'))
